<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0px;
            padding: 0px;
        }
        html,body{
            width: 100%;
            height: 100%;
        }

        table{
            text-align: center;
            border-collapse: collapse;
            width: 30%;
            margin: 80px auto;
        }
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th{
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
            font-size: 15px;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }

        input{
            outline-style: none;
            width: 100%;
        }
        button{
            width: 20%;
        }
        #estatId{
            display: none;
        }
        #nameMessage,#emailMessage,#phoneMessage,#qqMessage{
            background-color: red;
        }
    </style>
</head>
<body>
<div align="center" class="nav">
    <form action="/addContact" method="post" onsubmit="return sub()">
        <table class="gridtable">
            <tr><th colspan="2">添加联系人</th></tr>
            <tr><td><span>姓名：</span></td><td><input type="text" name="cname" id="cname"/><span id="nameMessage"></span></td></tr>
            <tr><td><span>手机：</span></td><td><input type="text" name="mobile" id="mobile"/><span id="phoneMessage"></span></td></tr>
            <tr><td><span>QQ：</span></td><td><input type="text" name="qq" id="qq"/><span id="qqMessage"></span></td></tr>
            <tr><td><span>Email：</span></td><td><input type="text" name="email" id="email"/><span id="emailMessage"></span></td></tr>
            <tr><td><span>地址：</span></td><td><input type="text" name="address"/></td></tr>
            <td colspan="2"><button>提交</button></td>
            </tr>
        </table>
    </form>
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.6.1.js}"></script>
<script type="text/javascript">
    function sub() {
        $("#qqMessage").html("");
        $("#phoneMessage").html("");
        $("#nameMessage").html("")
        $("#emailMessage").html("")
        var cnameRes = cnameYz();
        var emailRes = emailYz();
        var phoneRes = phoneYz();
        var qqRes = qqYz();
        if (cnameRes==true&&emailRes==true&&phoneRes==true&&qqRes==true){
            return true;
        }else{
            return false;
        }
    }
    function qqYz(){
        var qq = $("#qq").val();
        console.log(qq);
        if(qq==""){
            return true;
        }
        var qqTest = /[1-9][0-9]{4,}/;
        if (qq!="" && qqTest.test(qq)){
            return true;
        }else{
            $("#qqMessage").html("qq号格式不正确!");
            return false;
        }
    }
    function phoneYz(){
        var phone = $("#mobile").val();
        if(phone==""){
            return true;
        }
        var phoneTest = /^1(3|4|5|7|8)\d{9}$/;
        if (phoneTest.test(phone)){
            return true;
        }else {
            $("#phoneMessage").html("手机号格式不正确!");
            return false;
        }
    }
    function cnameYz(){
        var uName = $("#cname").val();
        if(uName==""){
            $("#nameMessage").html("用户名不可以为空！")
            return false;
        }else{
            return true;
        }
    }
    function emailYz(){
        var email =$("#email").val();
        if(email==""){
            return true;
        }
        var emailTest = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if (email!=""&&emailTest.test(email)){
            return true;
        }else{
            $("#emailMessage").html("邮箱格式不正确！")
            return false;
        }
    }
</script>
</body>
</html>